<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <title>V客部落10楼点餐拿餐平台</title>
    <link rel="shortcut icon" href="icon.png" type="image/x-icon"/>
    <script src="jquery.min.js"></script>
    <script src="httpUtils.js"></script>
    <script src="vue.js"></script>
    <script src="element/element.js"></script>
    <link rel="stylesheet" href="element/element.css">
</head>
<body>
<div class="main">
    <el-input v-model="userName"
              style="width: 100%;font-size: 24px;padding: 8px;box-sizing: border-box;margin-bottom: 10px"
              placeholder="输入名字再点按钮"></el-input>

    <div class="food_container">
        <el-button type="primary" @click="btn('A')">套餐A</el-button>
        <el-button type="primary" @click="btn('B')">套餐B</el-button>
        <el-button type="primary" @click="btn('C')">套餐C</el-button>
        <el-button type="primary" @click="btn('K')">套餐K</el-button>
        <!--<el-button type="primary" @click="btn('特殊餐')">特殊餐</el-button>-->
        <el-button type="primary" @click="btn('M')">加米饭</el-button>
    </div>

    <el-row :gutter="10" style="margin-top: 10px">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-card class="box-card" style="width: 98%">
                <div slot="header" class="clearfix">
                    <el-link type="primary" @click="copyText">一键复制拿饭话术</el-link>
                </div>
                <div>
                    <div>A：{{obj['A']}}</div>
                    <div>B：{{obj['B']}}</div>
                    <div>C：{{obj['C']}}</div>
                    <div>K：{{obj['K']}}</div>
                    <div v-if="obj['M'] > 0">加{{obj['M']}}份米饭</div>
                </div>
            </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-card class="box-card" style="width: 98%">
                <div slot="header" class="clearfix">
                    <span>取餐: </span>
                    <span style="font-size:22px;font-weight: bolder" v-if="userList.length>0">{{userList[0].name}}</span>
                </div>
                <el-table ref="singleTable" :data="userList" highlight-current-row size="mini" style="width: 100%">
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column property="name" label="名称"></el-table-column>
                    <el-table-column property="code" label="套餐"></el-table-column>
                    <el-table-column property="score" label="分数"></el-table-column>
                </el-table>
            </el-card>
        </el-col>
    </el-row>

    <div style="position: fixed;right: 0;bottom: 0;display: none">
        <el-button @click="$message.warning('未接到广告...');">看广告重新获取分数</el-button>
    </div>
</div>
<script>
    var _url = 'https://dcapi.6defeiqi.vip/test';
    // var _url = 'http://localhost:12333/test';

    var main = new Vue({
        el: '.main',
        data: {
            userName: '',
            userList: [],
            obj: {
                A: 0,
                B: 0,
                C: 0,
                K: 0,
                M: 0
            }
        },
        mounted() {
            this.generateRandomName();
        },
        methods: {
            generateRandomName() {
                const names = [
                    '艾伦', '三笠', '阿尔敏', '利威尔', '韩吉', '让', '萨莎', '康尼', '莱纳', '贝尔托特',
                    '鸣人', '佐助', '小樱', '卡卡西', '我爱罗', '雏田', '鹿丸', '宁次', '天天', '小李',
                    '炭治郎', '祢豆子', '善逸', '伊之助', '义勇', '香奈乎', '无惨', '炼狱', '天元', '蜜璃'
                ];
                const randomName = names[Math.floor(Math.random() * names.length)];
                this.userName = randomName;
                localStorage.setItem("___name___", randomName);
            },
            btn(v) {
                if (!main.userName) {
                    return;
                }
                localStorage.setItem("___name___", main.userName);
                $.postJSON(_url + '/set', {name: main.userName, code: v}, (r) => {
                    // main.userList = r;
                    main.getObj();
                });
            },
            getObj() {
                $.getJSON(_url + '/get', {}, function (r) {
                    main.userList = [];
                    if (r) {
                        let a = 0, b = 0, c = 0, k = 0, m = 0;
                        for (let i in r) {
                            if (r[i].code == 'A') {
                                a++;
                            }
                            if (r[i].code == 'B') {
                                b++;
                            }
                            if (r[i].code == 'C') {
                                c++;
                            }
                            if (r[i].code == 'K') {
                                k++;
                            }
                            if (r[i].code == 'M') {
                                m++;
                            }
                            if (r[i].code != 'M') {
                                main.userList.push(r[i]);
                            }
                        }
                        main.obj.A = a;
                        main.obj.B = b;
                        main.obj.C = c;
                        main.obj.K = k;
                        main.obj.M = m;
                    }
                });
            },
            copyText() {
                let value = "@AA小厨之家 @谭靓 老板麻烦把下面的装一起\n";
                if (main.userList.length > 9) {
                    value = "@AA小厨之家 @谭靓 老板麻烦把下面的分两袋装\n";
                }
                if (main.obj.A > 0) {
                    value += 'A：' + main.obj.A + '\n';
                }
                if (main.obj.B > 0) {
                    value += 'B：' + main.obj.B + '\n';
                }
                if (main.obj.C > 0) {
                    value += 'C：' + main.obj.C + '\n';
                }
                if (main.obj.K > 0) {
                    value += 'K：' + main.obj.K + '\n';
                }
                if (main.obj.M > 0) {
                    value += '加' + main.obj.M + '份米饭';
                }
                let oInput = document.createElement('textarea');
                oInput.value = value;
                oInput.style = "opacity: 0;position: absolute;top: 0;"; // 隐藏他，但不能不渲染这个元素，否则会失效
                document.body.appendChild(oInput);
                oInput.select() // 选择对象;
                document.execCommand('Copy') // 执行浏览器复制命令
                main.$message.success('复制成功');
            },
        }
    });

    main.getObj();

    setInterval(function () {
        main.getObj();
    }, 3000);

    var ___name___ = localStorage.getItem("___name___");
    if (___name___) {
        main.userName = ___name___;
    }
</script>
</body>
</html>
<style>
    .box-card {
        width: 48%;
        margin-bottom: 10px;
    }
</style>
